import { Component, OnInit } from '@angular/core';
import { UploadFile, NzMessageService } from 'ng-zorro-antd';
import { config } from 'src/config';
import { RoleRight } from 'src/kalend';
import { BannerService } from 'src/app/service/banner.service';

@Component({
  selector: 'app-banner',
  templateUrl: './banner.component.html',
  styleUrls: ['./banner.component.scss'],
  providers: [BannerService]
})
export class BannerComponent implements OnInit {
  user: any = RoleRight.getStorage();
  title: any;
  pageIndex = 1;
  pageSize = 15;
  total = 1;
  dataSet = [];
  loading = true;
  isOkLoading = false;
  isVisible = false;
  doc: any = {};
  type: any;
  status: any;
  typelist = [{ key: null, value: '全部' }, { key: 1, value: '轮播图' }, { key: 2, value: '优惠活动' }];
  statuslist = [{ key: null, value: '全部' }, { key: 1, value: '有效' }, { key: 0, value: '禁用' }];
  action = config.imageuploadurl;

  private getBase64(img: File, callback: (img: string) => void): void {
    const reader = new FileReader();
    reader.addEventListener('load', () => callback(reader.result.toString()));
    reader.readAsDataURL(img);
  }

  constructor(private service: BannerService, private msg: NzMessageService) { }

  ngOnInit() {
    this.searchData();
  }

  searchData(reset: boolean = false): void {
    this.loading = true;
    this.service.querylist({
      offset: this.pageIndex,
      limit: this.pageSize,
      title: this.title,
      type: this.type,
      status: this.status
    }).then((res) => {
      this.loading = false;
      this.total = res.total;
      this.dataSet = res.rows;
    });
  }
  /**新增 */
  add() {
    this.doc.createuser = this.user._id;
    this.isVisible = true;
  }

  /**修改 */
  edit(id: any) {
    this.isVisible = true;
    this.service.queryById(id).then((res) => {
      this.doc = res;
    });
  }
  /**禁用 */
  lock(id: any) {
    this.service.lock(id).then((res) => {
      this.searchData();
    });
  }
  /**启用 */
  open(id: any) {
    this.service.open(id).then((res) => {
      this.searchData();
    });
  }

  handleOk(): void {
    this.isOkLoading = true;
    if (!this.doc.title || this.doc.title === '') {
      this.msg.warning('请填写名称！');
    } else if (!this.doc.type) {
      this.msg.warning('请选择类别！');
    } else if (!this.doc.img) {
      this.msg.warning('请上传图片！');
    } else if (this.doc.type === 2 && !this.doc.hrefurl) {
      this.msg.warning('请设置活动外部链接！');
    } else {
      this.service.save(this.doc).then((res) => {
        this.searchData();
        this.msg.success('保存成功！');
        this.isVisible = false;
        this.doc = {};
      });
    }
  }
  handleCancel(): void {
    this.isVisible = false;
    this.doc = {};
  }

  beforeUpload = (file: File) => {
    const isJPG = file.type === 'image/jpeg' || 'image/png';
    if (!isJPG) {
      this.msg.error('您只能上传图片文件!');
    }
    const isLt2M = file.size / 1024 / 1024 < 2;
    if (!isLt2M) {
      this.msg.error('图片大小不能超过 2MB!');
    }
    return isJPG && isLt2M;
  }
  handleChange(info: { file: UploadFile }): void {
    if (info.file.status === 'uploading') {
      this.loading = true;
      return;
    }
    if (info.file.status === 'done') {
      // Get this url from response in real world.
      this.getBase64(info.file.originFileObj, (img: string) => {
        this.loading = false;
        if (info.file && info.file.response && info.file.response.data) {
          this.doc.img = info.file.response.data;
        }
      });
    }
  }

}
